<template>
  <div>
    <div class="i-layout-page-header">
      <h1>列表查询</h1>
      <h3>{{title}}</h3>
    </div>
    <Card>
      <div>
        <div class="search-con search-con-top">
          <Select v-model="searchKey" class="search-col">
            <Option v-for="item in columns" v-if="item.key !== 'action' &&item.key !== 'selection' &&item.key !== 'index'" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
          </Select>
          <Input @on-change="handleClear" clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue" />
          <Button @click="handleSearch" class="search-btn" type="primary">
            <Icon type="search" />&nbsp;&nbsp;搜索</Button>
          <Poptip confirm title="您确定要删除这些项吗?" @on-ok="handleDeAlete" @on-cancel="cancel">
            <Button v-show="selection.length!=0" style="margin-left: 0.25rem;">删除</Button>
          </Poptip>
          <Button type="primary" to="../costs/maintenance" style="float:right;" >+ 新增</Button>

        </div>
      </div>
      <Alert show-icon>
        <strong>已选择 </strong>
        <strong style="color: #2D8CF0;">{{selectNumber}}</strong>
        <strong> 项</strong>
      </Alert>
      <tables ref="selection"  editable v-model="tableData" :columns="columns" @on-select="handleSelected"
        @on-select-cancel="handleCancle" @on-select-all="handleSelectAll" @on-select-all-cancel="handleUnselectAll" />
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :current="current" @on-change="changePage"></Page>
        </div>
      </div>

      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
    </Card>
  </div>
</template>

<script>
  import Tables from '_c/tables'
  import {
    getTableData
  } from '@/api/data'
  export default {
    name: 'tables_page',
    components: {
      Tables
    },
    data() {
      return {
        tableColumnsChecked: ['ExPlateNum', 'VIC', 'OilCardD'],
        title: "维修单",
        formValidate: {
          GarName: '',
          GarTel: '',
          Contact: '',
          Handy: '',
          Address: '',
          Bank: '',
          Remark: ''
        },
        ruleValidate: {
          GarName: [{
            required: true,
            message: 'The GarName cannot be empty',
            trigger: 'blur'
          }],
          GarTel: [{
             required: true,
             message: 'The GarTel cannot be empty',
             trigger: 'blur'
            }
          ],
          Contact: [{
            required: true,
            message: 'The Contact cannot be empty',
            trigger: 'blur'
          }],
          Handy: [{
            required: true,
            message: 'The Handy cannot be empty',
            trigger: 'blur'
          }],
          Address: [{
              required: true,
              message: 'The Address cannot be empty',
              trigger: 'blur'
            }
          ],
          Bank: [{
            required: true,
            message: 'The Bank cannot be empty',
            trigger: 'blur'
          }],
          time: [{
            required: true,
            message: 'The time cannot be empty',
            trigger: 'blur'
          }],
          Remark: [{
              required: true,
              message: 'The Remark cannot be empty',
              trigger: 'blur'
            }
          ]
        },
        modal1: false,
        selectNumber: 0,
        columns: [{
            type: 'selection',
            width: 30,
            align: 'center',
            fixed: 'left',
            key: 'selection'
          }, {
            type: 'index',
            width: 50,
            align: 'center',
            fixed: 'left',
            key: 'index'
          },
          {
            title: '车牌号',
            key: 'PlateNum',
            width: 150,
            editable: true
          },
          {
            title: '日期',
            key: 'DateRM',
            width: 150,
            editable: true
          }, {
            title: '业务类型',
            key: 'RoM',
            width: 150,
            editable: true
          },
          {
            title: '维修厂',
            key: 'GarName',
            width: 150,
          }, {
            title: '项目名称',
            key: 'NameRM',
            width: 150,
          },
          {
            title: '数量',
            key: 'SumRM',
            width: 150,
          },
          {
            title: '单价',
            key: 'PriceRM',
            width: 150,
          }, {
            title: '金额',
            key: 'CostRM',
            width: 150,
          },
          {
            title: '工时',
            key: 'HourRM',
            width: 150,
          },
          {
            title: '工时费',
            key: 'PriceHour',
            width: 150,
          },

          {
            title: '进场里程',
            key: 'MileRM',
            width: 150,
          },{
            title: '经办人',
            key: 'Operator',
            width: 150,
          },{
            title: '总金额',
            key: 'Cost',
            width: 150,
          },
          {
            title: '备注',
            key: 'Remark',
            width: 150,
          },
          {
            title: '操作',
            fixed: 'right',
            key: 'action',
            width: 180,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      
                      this.show(params.index);
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.hide(params.index)
                    }
                  }
                }, '保存'),
              ]);
            }
          }
        ],
        tableData: [],
        total: 100,
        current: 1,
        selection: [],
        searchValue: '',
        searchKey: '',
      }
    },
    methods: {
      handleAdd(){
        console.log(this.$router);

      },
      handleSearch() {
        console.log(this.searchKey);
        this.tableData = this.tableData.filter(item => item[this.searchKey].indexOf(this.searchValue) > -1)
      },
      handleClear(e) {
        if (e.target.value === '') this.tableData = this.value
      },
      show(index) {
        console.log(this.tableData[index])
        this.display='',
        this.displayEdit='none',
        this.modal1 = true
      },
      hide(index){
        console.log(this.tableData[index])
        this.display='none',
        this.displayEdit='',
        this.modal1 = true
      },
      ok() {
        this.$Message.info('新增');
      },
      cancel() {
        this.$Message.info('取消');
      },
      handleUnselectAll(selection) {
        this.selection = []
        this.selectNumber = 0
      },
      handleSelectAll(selection) {
        console.log("selection:")
        console.log(selection)
        this.selection = selection;
        this.selectNumber = selection.length
      },
      handleCancle(selection) {
        this.selectNumber = selection.length
        this.selection = selection;
      },
      handleSelected(selection, row) {
        this.selectNumber = selection.length
        this.selection = selection;
        console.log("selection:")
        console.log(selection)
        console.log("row.initRowIndex:")
        console.log(row.initRowIndex)
      },
      handleDeAlete() {

        var index = this.selection.length - 1;
        for (; index >= 0; index--) {
          this.tableData.splice(this.selection[index].initRowIndex, 1);
          console.log(index);
        }
        console.log(this.tableData);
        this.selection = [];
        this.changePage();
      },

      exportExcel() {
        console.log(this.selectNumber);
        this.$refs.selection.exportCsv({
          filename: `table-${(new Date()).valueOf()}.csv`
        })
      },
      changePage() {
        // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
        getTableData().then(res => {
          this.tableData = res.data
        })
      }
    },
    mounted() {
      getTableData().then(res => {
        this.tableData = res.data
      });

    }
  }
</script>

<style>
  .i-layout-page-header {
    background-color: #FFF;
    padding: 1.25rem;
    margin-bottom: 1rem;
  }
</style>
